🔶章節:
🔹[開頭]
🔹[hash註冊登入練習]
🔹[會員網站設計]
🔹[資料庫、資料表建立]
🔹[加密過程]
🔹[網頁連接資料庫]
🔹[註冊處理]
🔹[總結]
如果影片中不清楚，需要補充的地方我會再添加到這邊~
👆教學中的[練習]程式碼一併附上，影片中會有每組的講解、說明更清楚👆
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
hashed_password VARCHAR(255) NOT NULL,
salt VARCHAR(255) NOT NULL
);
<html>
<head>
<title>註冊</title>
</head>
<body>
<h2>註冊新帳號</h2>
<form action="register.php" method="POST">
帳號：<input type="text" name="username"><br>
密碼：<input type="password" name="password"><br>
<input type="submit" value="註冊">
</form>
</body>
</html>
在註冊畫面中，我們請使用者填寫帳號密碼。
<?php
$servername = "伺服器名稱";
$username = "使用者名稱";
$password = "密碼";
$dbname = "資料庫名稱";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接資料庫失敗: " . $conn->connect_error);
}
$username = $conn->real_escape_string($_POST['username']);
$password = $conn->real_escape_string($_POST['password']);
// 生成隨機的鹽值
$salt = bin2hex(random_bytes(16));
// 將鹽值和密碼結合，使用雜湊函數計算雜湊值
$hashedPassword = hash('sha256', $password . $salt);
$sql = "INSERT INTO users (username, hashed_password, salt) VALUES ('$username', '$hashedPassword', '$salt')";
if ($conn->query($sql) === TRUE) {
echo "註冊成功<br>";
echo '<button onclick="window.location.href=\'loginWeb.php\'">前往登入頁面</button>';
} else {
echo "註冊失敗: " . $conn->error;
}
$conn->close();
?>
<html>
<head>
<title>登入頁面</title>
</head>
<body>
<h2>登入</h2>
<form action="login.php" method="POST">
帳號：<input type="text" name="username"><br>
密碼：<input type="password" name="password"><br>
<input type="submit" value="登入">
</form>
</body>
</html>
簡單的畫面，請使用者輸入帳號、密碼進行登入。
<?php
$servername = "伺服器名稱";
$username = "使用者名稱";
$password = "密碼";
$dbname = "資料庫名稱";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接資料庫失敗: " . $conn->connect_error);
}
$username = $conn->real_escape_string($_POST['username']);
$password = $conn->real_escape_string($_POST['password']);
$sql = "SELECT hashed_password, salt FROM users WHERE username='$username'";
$result = $conn->query($sql);
if ($result->num_rows == 1) {
$row = $result->fetch_assoc();
$storedHashedPassword = $row['hashed_password'];
$salt = $row['salt'];
// 使用輸入的密碼和鹽值計算雜湊值
$hashedLoginPassword = hash('sha256', $password . $salt);
// 比對計算的雜湊值和儲存的雜湊值
if ($hashedLoginPassword === $storedHashedPassword) {
echo "登入成功";
} else {
echo "登入失敗：密碼錯誤";
echo '<button onclick="window.location.href=\'loginWeb.php\'">重新登入</button>';
}
} else {
echo "登入失敗：帳號不存在";
echo '<button onclick="window.location.href=\'registerWeb.php\'">前往註冊頁面</button>';
}
$conn->close();
?>
使用 phpMyAdmin 創建一個名為 member 的資料表，並將註冊頁面收集的資訊存入裡面。
登入 phpMyAdmin：
http://localhost/phpmyadmin/（根據你的伺服器配置可能不同）。創建新的資料庫：
members_database，選擇「utf8_general_ci」作為編碼，然後點擊「創建」。創建 member 資料表：
在頂部選擇新建的資料庫（例如 members_database）。
在選項卡中選擇「結構」。
點擊「新建」，然後輸入資料表名稱，例如 member。
account：類型選擇 VARCHAR，設置為主索引。name1：類型選擇 VARCHAR，設置為需要的長度。name2：類型選擇 VARCHAR，設置為需要的長度。phone：類型選擇 VARCHAR，設置為需要的長度。mail：類型選擇 VARCHAR，設置為需要的長度，勾選「唯一」。hashed_password：類型選擇 VARCHAR，設置為需要的長度。salt：類型選擇 VARCHAR，設置為需要的長度。設定完成後，點擊底部的「保存」。
儲存設定：
SQL創建資料表:
在剛剛創建的資料庫下方，點擊資料庫名稱進入資料庫頁面，然後點擊上方的 "SQL" 選項卡。在 "SQL" 輸入框中，輸入以下 SQL 代碼來創建一個名為 member 的資料表：
CREATE TABLE member (
account VARCHAR(255) NOT NULL PRIMARY KEY,
name1 VARCHAR(255) NOT NULL,
name2 VARCHAR(255) NOT NULL,
phone VARCHAR(255) NOT NULL,
mail VARCHAR(255) NOT NULL UNIQUE,
hashed_password VARCHAR(255) NOT NULL,
salt VARCHAR(255) NOT NULL
);
<html>
<head>
<title>註冊會員</title>
</head>
<body>
<h2>註冊會員</h2>
<form action="register.php" method="post">
<label>使用者名稱：</label>
<input type="text" name="name1" required placeholder="輸入姓名"><br>
<label>暱稱：</label>
<input type="text" name="name2"placeholder="我們如何稱呼您"><br>
<label>電話：</label>
<input type="text" name="phone"><br>
<label>郵件地址：</label>
<input type="email" name="mail" required ><br>
<label>密碼：</label>
<input type="password" name="password" required placeholder="至少一個英文字母和一個數字，長度超過5"><br>
<label>確認密碼：</label>
<input type="password" name="confirm_password" required><br>
<input type="submit" value="提交">
</form>
</body>
</html>
收集使用者會員註冊資料。
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$servername = "伺服器名稱";
$username = "使用者名稱";
$password = "密碼";
$dbname = "資料庫名稱";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
$name1 = $conn->real_escape_string($_POST['name1']);
$name2 = $conn->real_escape_string($_POST['name2']);
$phone = $conn->real_escape_string($_POST['phone']);
$mail = $conn->real_escape_string($_POST['mail']);
$raw_password = $_POST['password'];
$confirm_password = $_POST['confirm_password'];
$email_parts = explode('@', $mail);
$account = $conn->real_escape_string($email_parts[0]);
$error_message = "";
if (!filter_var($mail, FILTER_VALIDATE_EMAIL)) {
$error_message .= "請輸入有效的郵件地址。<br>";
}
if (strlen($raw_password) <= 5 || !preg_match("/^(?=.*[A-Za-z])(?=.*\d)/", $raw_password)) {
$error_message .= "密碼必須包含至少一個英文字母和一個數字，長度超過5。<br>";
}
if ($raw_password !== $confirm_password) {
$error_message .= "確認密碼與密碼不一致。<br>";
}
$account_check_query = "SELECT * FROM member WHERE account = '$account' LIMIT 1";
$result = $conn->query($account_check_query);
if ($result && $result->num_rows > 0) {
$error_message .= "帳號已存在，請選擇另一個帳號。<br>";
}
if (!empty($error_message)) {
echo '<button onclick="goBack()">返回修改</button><br>';
echo '<script>
function goBack() {
window.history.back();
}
</script>';
}
if (empty($error_message)) {
$salt = random_bytes(16);
$hashedPassword = hash('sha256', $raw_password . $salt);
$sql = "INSERT INTO member (name1, name2, phone, mail, account, hashed_password, salt) VALUES ('$name1', '$name2', '$phone', '$mail', '$account', '$hashedPassword', '$salt')";
if ($conn->query($sql) === TRUE) {
echo "註冊成功，您的帳號為".$account;
echo '<button onclick="window.location.href=\'loginWeb.php\'">前往登入頁面</button>';
} else {
echo "註冊失敗: " . $conn->error;
}
} else {
echo $error_message;
}
$conn->close();
}
?>
這段程式碼主要功能是接收使用者的註冊資訊，進行輸入驗證，如果通過驗證則將資訊存入資料庫，並提供返回修改和前往登入頁面的按鈕。
我們成功地完成了一個簡單的註冊系統，能夠有效地收集使用者的註冊資料並將其安全地存儲到資料庫中。在這個過程中，我們運用了我們之前學習的 HTML 表單元素、PHP 資料處理和 MySQL 資料庫操作知識，並且學會了如何對使用者的密碼進行雜湊處理，以確保使用者敏感資料的保密性和安全性。
明天繼續呈現登入功能、畫面、葉面跳轉......
iThome鐵人賽
看影片追技術